<template>
  <up-navbar
    :title="title"
    :leftIcon="leftIcon"
    :leftIconColor="leftIconColor"
    :fixed="fixed"
    :bgColor="bgColor"
    :border="false"
    @leftClick="goBack"
    placeholder
    :customStyle="customStyle"
  >
    <template v-if="left.title || left.imageUrl" v-slot:left>
      <view class="left-content">
        <view
          class="left-text"
          :style="'color:' + titleColor"
          v-if="left.title"
          >{{ left.title }}</view
        >
        <view
          hover-class="u-hover-class"
          @click="handleClickLeft"
          class="left-button-view"
        >
          <view
            v-if="left.imageUrl"
            class="left-button"
            :style="{ backgroundColor: left.backgroundColor }"
          >
            <image
              :src="left.imageUrl"
              mode="widthFix"
              :style="{ width: left.width }"
              class="left-image"
            >
            </image>
          </view>
          <view
            class="right-text"
            :style="'color:' + titleColor"
            v-if="left.rightTitle"
          >
            {{ left.rightTitle }}
          </view>
        </view>
      </view>
    </template>
    <template v-slot:right>
      <view class="slot-wrap" v-if="text || image">
        <view
          class="content-view"
          v-if="text || image"
          hover-class="u-hover-class"
          @click="handleClickRight"
        >
          <image
            mode="widthFix"
            :src="image"
            v-if="image"
            class="image-view"
            :style="'width:' + imageWidth + 'rpx'"
          ></image>
          <view>{{ text }}</view>
        </view>
        <view
          class="content-view"
          v-if="secondText || secondImage"
          hover-class="u-hover-class"
          @click="handleClickRightSecond"
        >
          <image
            mode="widthFix"
            :src="secondImage"
            v-if="image"
            class="image-view"
            :style="'width:' + imageWidth + 'rpx'"
          ></image>
          <view>{{ secondText }}</view>
        </view>
      </view>
    </template>
  </up-navbar>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: " ",
    },
    titleWidth: {
      type: [String, Number],
      default: "250",
    },
    bgColor: {
      type: String,
      default: "transparent",
    },
    leftIcon: {
      type: String,
      default: "arrow-left",
    },
    // 返回箭头的颜色
    leftIconColor: {
      type: String,
      default: "#333333",
    },
    // 是否固定在顶部
    fixed: {
      type: Boolean,
      default: true,
    },
    backText: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
    image: {
      type: String,
      default: "",
    },
    secondText: {
      type: String,
      default: "",
    },
    secondImage: {
      type: String,
      default: "",
    },
    imageWidth: {
      type: [String, Number],
      default: "24",
    },
    backTextBold: {
      type: Boolean,
      default: false,
    },
    backIconColor: {
      type: String,
      default: "#333333",
    },
    titleColor: {
      type: String,
      default: "#191C27",
    },
    backTextStyle: {
      type: Object,
      default() {
        return {
          color: "#191C27",
          "font-size": "weight",
          "font-size": "32rpx",
          "margin-left": "8rpx",
        };
      },
    },
    left: {
      type: Object,
      default() {
        return {
          title: "",
          imageUrl: "",
        };
      },
    },
    // 自定义返回逻辑
    customBack: {
      type: Function,
      default: () => {
        console.log("customBack");
        // #ifdef APP-PLUS
        if (getCurrentPages().length == 1) {
          uni.switchTab({
            url: "/pages/index/index",
          });
        } else {
          uni.navigateBack();
        }
        // #endif
        // #ifdef MP ||H5
        if (getCurrentPages().length == 1) {
          uni.switchTab({
            url: "/pages/index/index",
          });
        } else {
          uni.navigateBack();
        }
        // #endif
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    handleClickLeft() {
      this.$emit("leftClick", 0);
    },
    handleClickRight() {
      this.$emit("click", 0);
    },
    handleClickRightSecond() {
      this.$emit("click", 1);
    },
    goBack() {
      // 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
      if (typeof this.customBack === "function") {
        // 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
        // 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
        this.customBack.bind(uni.$u.$parent.call(this))();
      } else {
        uni.navigateBack();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.left-content {
  min-width: 120rpx;
  display: flex;
  align-content: center;

  .left-text {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 32rpx;
    color: #191c27;
    max-width: 280rpx;
    white-space: nowrap;
    padding-right: 44rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 32rpx;
  }

  .left-button-view {
    display: flex;
    align-items: center;

    .left-button {
      width: 64rpx;
      // height: 64rpx;
      border-radius: 24rpx;
      display: flex;
      align-content: center;

      .left-image {
        display: flex;
        align-content: center;
        width: 64rpx;
        height: 64rpx;
        // border-radius: 24rpx;
      }
    }

    .right-text {
      display: flex;
      align-content: center;
      align-items: center;
      margin-left: 16rpx;
      color: #333;
      font-size: 28rpx;
    }
  }
}

.slot-wrap {
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  // #ifdef APP-PLUS
  margin-right: 24rpx;
  // #endif
  // #ifdef MP
  margin-right: 168rpx;

  // #endif

  .content-view {
    margin-left: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 160rpx;
    padding: 0 18rpx;
    height: 48rpx;
    border-radius: 24rpx;
    background-color: #ffffff;
    color: #333333;
    font-size: 24rpx;

    .image-view {
      width: 20rpx;
      height: 24rpx;
      margin-right: 8rpx;
    }
  }
}
</style>
